<template>
  <div>
    <el-form :inline="true" :model="filters" label-width="90px" label-position="right">
           <el-form-item>
            <el-input
              placeholder="请输入姓名"
              clearable
              v-model="filters.XM"
            ></el-input>
           </el-form-item>
           <el-form-item>
             <el-select
            v-model="filters.ZW"
            placeholder="请选择"
            clearable
           >
            <el-option
              v-for="item in dicList"
              :key="item.ID"
              :label="item.MC"
              :value="item.ID"
            >
            </el-option>
          </el-select>
           </el-form-item>
           <el-form-item>
            <el-button @click="handleQuery">查询</el-button>
          </el-form-item>
    </el-form>
    <el-table class="mt10 mybg"  :data="tableData" fit border>
      <!-- header-cell-style="background-color:#3566E3;color:#fff;" -->
      <el-table-column prop="XM" label="姓名" align="center"></el-table-column>
      <el-table-column prop="gender" label="性别" align="center"></el-table-column>
      <el-table-column  label="职务" align="center">
          <template slot-scope="scope">
          
          <span>
            {{scope.row.ZW?dicList.find(items => {
            return items.ID == scope.row.ZW}).MC:"未知"}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="DH" label="电话" align="center"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[5,8]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name: "Age",
  props: {
    ID: String
  },
  data() {
    return {
      tableData: [],
      DWID: this.ID,
      current: 1,
      page:0,
      pagesize: 5,
      total: 0,
      filters:{
        XM:""
      },
      dicList:[]
    };
  },
  watch: {
    ID() {
      this.DWID = this.ID;
      this.current = 1;
      this.pagesize = 5;
     
      let find =  {
              SSDW: this.DWID
            }
    this.getRelatePeople(find);
    }
  },
  created() {
    let find =  {
              SSDW: "001003001002004000000000000000"
            }
    this.getRelatePeople(find);
  },
  mounted() {
    this.dicList = JSON.parse(sessionStorage.getItem("dicList"))
  },
  methods: {
    handleQuery(){
       let find ={
         XM:{ $regex: this.filters.XM, $options: 'i' },
         ZW:this.filters.ZW
       };
       this.getRelatePeople(find);
    },
    getRelatePeople(find) {
      let that = this;
      that.axios
        .post(`${that.$store.state.http}/list/getRelatePeople`, {
          page: that.current,
          limit: that.pagesize,
          para: {
            where:find
          }
        })
        .then(res => {
          that.total = res.data.total;
          that.tableData = res.data.data;
          that.tableData.forEach(item => {
             switch (item.XB) {
                case '02': 
                  item.gender = "女";
                  break;
                case '01':
                  item.gender = "男";
                  break;
              }
          })
        });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      let find = {
        SSDW:this.DWID
      }
      this.getRelatePeople(find);
    },
    handleCurrentChange(val) {
      this.current = val;
      let find = {
        SSDW:this.DWID
      }
      this.getRelatePeople(find);
    },
  }
};
</script>
<style scoped>
.el-table {
  font-size: 0.1rem;
  color: #fff;
}
</style>
<style>
.el-table__row:nth-child(2n) {
  background: #1c304b;
  opacity: 0.8;
}
.el-table__row:nth-child(2n + 1) {
  background: #002039;
  opacity: 0.8;
}
.el-table thead,
.el-table .el-checkbox {
  color: #ffffff;
  
}
.el-table th, .el-table tr {
  background-color:#3566E3;
}

.el-table__body tr.hover-row > td {
  color: #032a6d;
  background: #041f4e;
  opacity: 1;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #000;
  opacity: 0.2;
}
.el-table td,
.el-table th {
  padding: 0;
}
.el-pagination__total {
  color: #fff;
}
.el-form-item {
  margin-bottom: 0;
}
.mybg{
  background-color:#3566E3;color:#fff;
}
.el-pagination__jump {
  color: #fff;
}
</style>